<script>
import config from "../../config";
import { createProduct, createProject, getProductList, getProjectList, uploadHarFiles, getHarList, generateWinexJmxs, generateJmxs } from "../api/harApi";
import { ElMessage } from "element-plus";

export default {
    name: "HarPage",

    data() {
        return {
            products: [],
            projects: [],
            hars: [],

            select: {
                productId: null,
                projectId: null
            },

            dialog: {
                createProduct: {
                    visible: false,
                    title: "新建产品",
                    form: {
                        productName: "",
                        productSummary: ""
                    }
                },
                createProject: {
                    visible: false,
                    title: "新建项目",
                    form: {
                        projectName: "",
                        projectSummary: ""
                    }
                },
                uploadHarFiles: {
                    visible: false,
                    title: "上传HAR文件",
                    form: {
                        productId: "",
                        projectId: "",
                        harFiles: []
                    }
                }
            }

        }
    },

    async mounted() {
        this.products = (await getProductList()).data;
        this.projects = (await getProjectList()).data;
        this.hars = (await getHarList({ productId: this.select.productId, projectId: this.select.projectId })).data;
    },

    methods: {
        async handleQueryHars() {
            this.hars = (await getHarList({ productId: this.select.productId, projectId: this.select.projectId })).data;
        },

        async handleSubmitCreateProductForm() {
            await createProduct(this.dialog.createProduct.form);
            this.products = (await getProductList()).data;
            this.dialog.createProduct.visible = false;
        },

        async handleClearCreateProductForm() {
            this.dialog.createProduct.form = {
                productName: "",
                productSummary: ""
            };
            this.dialog.createProduct.visible = false;
        },

        async handleSubmitCreateProjectForm() {
            await createProject(this.dialog.createProject.form);
            this.projects = (await getProjectList()).data;
            this.dialog.createProject.visible = false;
        },

        async handleClearCreateProjectForm() {
            this.dialog.createProject.form = {
                projectName: "",
                projectSummary: ""
            };
            this.dialog.createProject.visible = false;
        },

        async handleSubmitUploadHarFilesForm() {
            let formData = new FormData();
            formData.append("productId", this.dialog.uploadHarFiles.form.productId || "");
            formData.append("projectId", this.dialog.uploadHarFiles.form.projectId || "");
            this.dialog.uploadHarFiles.form.harFiles.forEach(harFile => {
                harFile = new File([harFile.raw], encodeURIComponent(harFile.name), { type: harFile.type });
                formData.append("harFiles", harFile);
            });
            await uploadHarFiles(formData);
            this.dialog.uploadHarFiles.visible = false;
            this.hars = (await getHarList({ productId: this.select.productId, projectId: this.select.projectId })).data;
        },

        async handleClearUploadHarFilesForm() {
            this.dialog.uploadHarFiles.form = {
                productId: "",
                projectId: "",
                harFiles: []
            };
        },

        async handleGenerateJmx(uuid, productName) {
            if (productName === "WINEX") {
                await generateWinexJmxs({ uuid });
                ElMessage({
                    message: "生成Jmx文件成功",
                    type: "success"
                });
            }
            else {
                await generateJmxs({ uuid });
                ElMessage({
                    message: "生成Jmx文件成功",
                    type: "success"
                });
            }
            this.$router.push({ path: "/jmx", query: { uuid } });
        },

        handleDownloadHarFile(harFilePath) {
            const baseUrl = config.service.baseURL;
            const downloadUrl = `${baseUrl}/${harFilePath}`;
            console.log(downloadUrl);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.setAttribute("download", "");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    },
}
</script>

<template>
    <div class="har-page">
        <div class="toolbar">
            <el-select v-model="select.productId" placeholder="请选择产品" class="select-item" clearable>
                <el-option v-for="product in products" :key="product.productId" :label="product.productName"
                    :value="product.productId"></el-option>
            </el-select>
            <el-select v-model="select.projectId" placeholder="请选择项目" class="select-item" clearable>
                <el-option v-for="project in projects" :key="project.projectId" :label="project.projectName"
                    :value="project.projectId"></el-option>
            </el-select>
            <el-button @click="handleQueryHars" class="toolbar-button">查询</el-button>
            <el-button @click="dialog.uploadHarFiles.visible = true" class="toolbar-button">上传HAR文件</el-button>
            <el-button @click="dialog.createProduct.visible = true" class="toolbar-button">新建产品</el-button>
            <el-button @click="dialog.createProject.visible = true" class="toolbar-button">新建项目</el-button>
        </div>
        <div class="table-container">
            <el-table :data="hars" height="calc(100vh - 280px)" class="har-table">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="uuid" label="UUID" width="300"></el-table-column>
                <el-table-column prop="productName" label="产品名称" width="150"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
                <el-table-column label="测试计划" width="150">
                    <template #default="{ row }">
                        <span v-for="(har, index) in row.harList" :key="index">
                            <el-link @click="handleDownloadHarFile(har.harFilePath)" type="primary" class="download-link">
                                {{ har.testPlanName }}
                            </el-link>
                            <br v-if="index < row.harList.length - 1">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="200"></el-table-column>
                <el-table-column prop="updatedAt" label="更新时间" width="200"></el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" @click="handleGenerateJmx(row.uuid, row.productName)" class="action-button" size="small">生成JMX</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog v-model="dialog.createProduct.visible" :title="dialog.createProduct.title"
                @close="handleClearCreateProductForm" class="custom-dialog">
                <el-form :model="dialog.createProduct.form" label-width="100px">
                    <el-form-item label="产品名称">
                        <el-input v-model="dialog.createProduct.form.productName" placeholder="请输入产品名称" />
                    </el-form-item>
                    <el-form-item label="产品摘要">
                        <el-input v-model="dialog.createProduct.form.productSummary" placeholder="请输入产品摘要" />
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="dialog.createProduct.visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitCreateProductForm">提交</el-button>
                    </div>
                </el-form>
            </el-dialog>
            <el-dialog v-model="dialog.createProject.visible" :title="dialog.createProject.title"
                @close="handleClearCreateProjectForm" class="custom-dialog">
                <el-form :model="dialog.createProject.form" label-width="100px">
                    <el-form-item label="项目名称">
                        <el-input v-model="dialog.createProject.form.projectName" placeholder="请输入项目名称" />
                    </el-form-item>
                    <el-form-item label="项目摘要">
                        <el-input v-model="dialog.createProject.form.projectSummary" placeholder="请输入项目摘要" />
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="dialog.createProject.visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitCreateProjectForm">提交</el-button>
                    </div>
                </el-form>
            </el-dialog>
            <el-dialog v-model="dialog.uploadHarFiles.visible" :title="dialog.uploadHarFiles.title"
                @close="handleClearUploadHarFilesForm" class="custom-dialog">
                <el-form :model="dialog.uploadHarFiles.form" label-width="100px">
                    <el-form-item label="产品名称">
                        <el-select v-model="dialog.uploadHarFiles.form.productId" clearable placeholder="请选择产品">
                            <el-option v-for="product in products" :key="product.productId" :label="product.productName"
                                :value="product.productId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-select v-model="dialog.uploadHarFiles.form.projectId" clearable placeholder="请选择项目">
                            <el-option v-for="project in projects" :key="project.projectId" :label="project.projectName"
                                :value="project.projectId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="HAR文件">
                        <el-upload v-model:file-list="dialog.uploadHarFiles.form.harFiles" :multiple="true" accept=".har"
                            :auto-upload="false">
                            <el-button>点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="dialog.uploadHarFiles.visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitUploadHarFilesForm">提交</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
.har-page {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.select-item {
  width: 180px;
}

.toolbar-button {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
}

.toolbar-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: white;
}

.table-container {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.har-table {
  border: none;
}

.har-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.download-link {
  font-size: 14px;
}

.action-button {
  padding: 8px 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.custom-dialog :deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.custom-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 20px;
}
</style>